<page-header />

<p>
  The dynamic forms are powered by
  <a href="https://github.com/ngx-formly/ngx-formly" target="_blank">
    <code>ngx-formly</code>
  </a>
  .
</p>

<mat-card>
  <mat-card-header>
    <mat-card-title>Simple</mat-card-title>
  </mat-card-header>

  <mat-card-content>
    <form [formGroup]="form" (ngSubmit)="submit()">
      <formly-form [form]="form" [fields]="fields" [model]="model" />

      <div class="d-flex justify-content-end m-t-8">
        <button matButton class="m-x-8" type="button">Cancel</button>
        <button matButton="filled">Submit</button>
      </div>
    </form>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-header>
    <mat-card-title>Advanced Layout</mat-card-title>
  </mat-card-header>

  <mat-card-content>
    <form [formGroup]="form2" (ngSubmit)="submit2()">
      <formly-form [model]="model2" [fields]="fields2" [form]="form2" />

      <div class="d-flex justify-content-center m-t-8">
        <button matButton class="m-x-8" type="button">Cancel</button>
        <button matButton="filled">Submit</button>
      </div>
    </form>
  </mat-card-content>
</mat-card>
